<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>订单详情</title>
</head>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
	a: link{color: #CBCBC9;
}

a:visited {
	color: #CBCBC9;
}

a:hover {
	color: #CBCBC9;
}

a:active {
	color: #CBCBC9;
}

}
a {
	text-decoration: none;
	color: #757670;
}

#header {
	position: relative;
	margin-left: 210px;
	font-size: 13px;
	color: #757670;
	margin-top: 10px;
}

#body {
	top: 100px;
	width: 845px;
	position: relative;
	left: 50%;
	margin-left: -415px;
	border-bottom: 2px #B3B3B3 solid;
}

#top {
	align-content: center;
}

#table1 {
	margin-top: 15px;
	border: 1px #BCBCBA solid;
	border-collapse: collapse;
}

.d1 {
	background-color: #F4F3F1;
	width: 250px;
	height: 35px;
	border: 1px #BCBCBA solid;
}

.d1 p {
	margin-left: 20px;
	font-size: 13px;
}

.d2 {
	border: 1px #BCBCBA solid;
	width: 500px;
	height: 140px;
	font-weight: 300px;
}

.d3 {
	border: 1px #BCBCBA solid;
	font-size: 13px;
	background-color: #FBFBFB;
	height: 100px;
}

#orderstatus {
	margin-left: 50px;
	color: #232B2E;
	font-size: 18px;
}

.address {
	margin-left: 10px;
	margin-right: 10px;
	color: #757670;
	font-size: 13px;
}

#down {
	
}

#right_d3 {
	clear: both;
	margin-top: 23px;
}

#right_d3_head {
	height: 40px;
	border: 1px #E4EAEE solid;
}

#right_d3_head ul li {
	list-style: none;
	float: left;
	text-align: center;
}

#right_d3_head ul li span {
	position: relative;
	top: 12px;
	color: #3C3C3C;
}

.right_d3_li1 {
	width: 320px;
}

.right_d3_li1 span {
	margin-left: 30px;
}

.right_d3_li2 {
	width: 220px;
}

.right_d3_li2 span {
	margin-left: 160px;
}

.right_d3_li3 {
	width: 150px;
}

.right_d3_li4
,
{
width
:
 
90
px
;

	
}
.right_d3_li4 span {
	margin-left: 50px;
}

.right_d3_pro {
	border-bottom: 1px #E4EAEE solid;
	border-left: 1px #E4EAEE solid;
	border-right: 1px #E4EAEE solid;
}

.right_d3_pro table td {
	height: 110px;
}

.right_d3_pro_td1 {
	width: 330px;
}

.tr_li1 { /*图片*/
	width: 80px;
	border: 1px #E4EAEE solid;
	text-align: center;
	margin-left: 10px;
}

.tr_li2 {
	width: 200px;
	margin-left: 10px;
	margin-top: 25px; /*商品描述*/
}

.right_d3_pro_td2, .right_d3_pro_td3 { /*单价数量*/
	width: 80px;
	text-align: center;
}

.right_d3_pro_td4 { /* 实付款*/
	width: 120px;
	text-align: center;
	border-left: 1px #E4EAEE solid;
}

.right_d3_pro_td1 ul li {
	list-style: none;
	float: left;
}

.right_d3_pro_td2 ul li {
	list-style: none;
}

.right_d3_pro_td1 a:VISITED, .right_d3_pro_td1 a:LINK {
	text-decoration: none;
	color: #757670;
}

.right_d3_pro_td1 a:HOVER {
	text-decoration: underline;
	color: #4C8FBD;
}

.right_d3_pro_td2_s1 {
	color: #757670;
}

.right_d3_pro_td2_s2 {
	color: #757670;
}

.right_d3_pro_td3 span, .right_d3_pro_td5 span {
	color: #757670;
}

.right_d3_pro_td4 span {
	font-size: 14px;
	font-weight: bold;
	color: #757670;
}

#totalprice td {
	border: none;
	height: 80px;
	width: 920px;
	background-color: #F4F3F1;
}

#totalprice td span {
	margin-left: 700px;
	font-weight: 300px;
}

#app {
	position: fixed;
	top: 200px;
	right: 5px;
	height: 234px;
	width: 202px;
}.foot ul {
	margin-top: 190px;
	display: flex;
	justify-content: center;
}

.foot ul li {
	display: inline-block;
	padding: 0 20px;
	color: #666;
	font-size: 12px;
	margin-bottom: 10px;
}

.mgj_footer_hostname {
	margin-top: 10px;
	color: hsla(0, 0%, 40%, .7);
	display: flex;
	justify-content: center;
	margin-bottom: 10px;
	font-size: 13px;
}
</style>
<body>
		<jsp:include page="../nhead.jsp"></jsp:include>
	<div id="body">
		<div id="top">
		
			<table id="table1" cellspacing="0">
				<tr>
					<td class="d1"><p>订单信息： &nbsp;&nbsp;${order.date }</p></td>
					<td class="d2" rowspan="2"><p id="orderstatus">
							订单状态：


							<c:if test="${order.status eq 1 }">
								<span style="color: #f00">未付款</span>
							</c:if>
							<c:if test="${order.status eq 2 }">
								<span>等待发货</span>
							</c:if>
							<c:if test="${order.status eq 3 }">
								<span>卖家已发货</span>
							</c:if>
							<c:if test="${order.status eq 4 }">
								<span>退款处理中</span>
							</c:if>
							<c:if test="${order.status eq 5 }">
								<span>卖家已退款</span>
							</c:if>
							<c:if test="${order.status eq 6 }">
								<span>订单已完成</span>
							</c:if>
							<c:if test="${order.status eq 7 }">
								<span>交易关闭</span>
							</c:if>

						</p></td>
				</tr>
				<tr>
					<td class="d3"><p class="address">${address.base }&nbsp;${address.place }&nbsp;(&nbsp;${address.name }收&nbsp;)&nbsp;</span><span class="phone">${address.phone }
						<p></td>
				</tr>
			</table>
		</div>
		<div id="down">
			<div id="right_d3">
				<div id="right_d3_head">
					<ul>
						<li class="right_d3_li1"><span
							style="color: #5D6164; font-size: 14px;">商品信息</span></li>
						<li class="right_d3_li2"><span
							style="color: #5D6164;font-size: 14px;">单价</span></li>
						<li class="right_d3_li3"><span
							style="color:#5D6164;font-size: 14px;">数量</span></li>
						<li class="right_d3_li4"><span
							style="color: #5D6164;font-size: 14px;">实付款</span></li>

					</ul>
				</div>
				<div class="right_d3_pro">
					<c:forEach items="${order.orderProducts }" var="orderProduct"
						varStatus="i">
						<table id="table2" width="845" cellpadding="0" cellspacing="0">
							<tr>
								<td class="right_d3_pro_td1">
									<ul>
										<li class="tr_li1"><img src="<%=request.getContextPath() %>/image/${orderProduct.product.imgs[0].name }"  height="50"></a></li>
										<li class="tr_li2"><span
											style="color: #757670;font-size: 14px;"><a href="">${orderProduct.product.name }${orderProduct.product.describe }</a></span></li>
									</ul>
								</td>
								<td class="right_d3_pro_td2">
									<ul>
										<li><span class="right_d3_pro_td2_s1"><del>${orderProduct.product.price }</del></span></li>
										<li><span class="right_d3_pro_td2_s2"><fmt:formatNumber
													type="number"
													value="${orderProduct.product.price * orderProduct.product.discount }"></fmt:formatNumber></span></li>
									</ul>
								</td>
								<td class="right_d3_pro_td3"><span>${orderProduct.quantity }</span>
								</td>
								<td class="right_d3_pro_td4"><c:if test="${i.index eq 0 }">
										<span>${order.price }</span>
									</c:if></td>

							</tr>
						</table>
					</c:forEach>
				</div>

			</div>
		</div>
		<div>
			<table style="margin-top: 10px;">
				<tr id="totalprice">
					<td ><span style="font-size:20px ;color:#f00">总价:￥${order.price }</span>
					</td>
				</tr>
			</table>
		</div>
	</div>
	<div>
		<img id="app" src="<%=request.getContextPath() %>/image/APP.png" />
	</div>
		<div class="foot">
			<div>
				<ul>
					<li>关于我们</li>
					<li>|</li>
					<li>联系我们</li>
					<li>|</li>
					<li>管理员入口</li>
					<li>意见反馈</li>
					<li>|</li>
					<li>规则中心</li>
					<li>|</li>
					<li>基本信息</li>
					<li>|</li>
					<li>特色产品</li>
				</ul>
			</div>

			<div class="mgj_footer_hostname">
				<span>————————————————————————————————————————&ensp;&ensp;&ensp;&ensp;©2019
					dqz.com
					大民主&ensp;&ensp;&ensp;&ensp;————————————————————————————————————————</span>
			</div>
		</div>

	
</body>
</html>
